<div class="doc-content">



<header class="api-profile-header" >
  <h2 class="md-display-1" >{{currentDoc.name}} API Documentation</h2>
  
  

</header>



<div layout="row" class="api-options-bar with-icon"></div>


<div class="api-profile-description">
  <p><code>$mdDialog</code> opens a dialog over the app to inform users about critical information or require
 them to make decisions. There are two approaches for setup: a simple promise API
 and regular object syntax.</p>
<h2 id="restrictions">Restrictions</h2>
<ul>
<li>The dialog is always given an isolate scope.</li>
<li>The dialog&#39;s template must have an outer <code>&lt;md-dialog&gt;</code> element.
Inside, use an <code>&lt;md-dialog-content&gt;</code> element for the dialog&#39;s content, and use
an <code>&lt;md-dialog-actions&gt;</code> element for the dialog&#39;s actions.</li>
<li>Dialogs must cover the entire application to keep interactions inside of them.
Use the <code>parent</code> option to change where dialogs are appended.</li>
</ul>
<h2 id="sizing">Sizing</h2>
<ul>
<li>Complex dialogs can be sized with <code>flex=&quot;percentage&quot;</code>, i.e. <code>flex=&quot;66&quot;</code>.</li>
<li>Default max-width is 80% of the <code>rootElement</code> or <code>parent</code>.</li>
</ul>
<h2 id="css">CSS</h2>
<ul>
<li><code>.md-dialog-content</code> - class that sets the padding on the content as the spec file</li>
</ul>

</div>


<div>
  

  


  <section class="api-section">
    <h2 id="Usage">Usage</h2>
      <hljs lang="html">
<div  ng-app="demoApp" ng-controller="EmployeeController">
  <div>
    <md-button ng-click="showAlert()" class="md-raised md-warn">
      Employee Alert!
      </md-button>
  </div>
  <div>
    <md-button ng-click="showDialog($event)" class="md-raised">
      Custom Dialog
      </md-button>
  </div>
  <div>
    <md-button ng-click="closeAlert()" ng-disabled="!hasAlert()" class="md-raised">
      Close Alert
    </md-button>
  </div>
  <div>
    <md-button ng-click="showGreeting($event)" class="md-raised md-primary" >
      Greet Employee
      </md-button>
  </div>
</div>
</hljs>

<h3 id="javascript-object-syntax">JavaScript: object syntax</h3>
<hljs lang="js">
(function(angular, undefined){
  &quot;use strict&quot;;

  angular
   .module(&#39;demoApp&#39;, [&#39;ngMaterial&#39;])
   .controller(&#39;AppCtrl&#39;, AppController);

  function AppController($scope, $mdDialog) {
    var alert;
    $scope.showAlert = showAlert;
    $scope.showDialog = showDialog;
    $scope.items = [1, 2, 3];

    // Internal method
    function showAlert() {
      alert = $mdDialog.alert({
        title: &#39;Attention&#39;,
        textContent: &#39;This is an example of how easy dialogs can be!&#39;,
        ok: &#39;Close&#39;
      });

      $mdDialog
        .show( alert )
        .finally(function() {
          alert = undefined;
        });
    }

    function showDialog($event) {
       var parentEl = angular.element(document.body);
       $mdDialog.show({
         parent: parentEl,
         targetEvent: $event,
         template:
           &#39;<md-dialog aria-label="List dialog">&#39; +
           &#39;  <md-dialog-content>&#39;+
           &#39;    <md-list>&#39;+
           &#39;      <md-list-item ng-repeat="item in items">&#39;+
           &#39;       <p>Number {{item}}</p>&#39; +
           &#39;      </md-item>&#39;+
           &#39;    </md-list>&#39;+
           &#39;  </md-dialog-content>&#39; +
           &#39;  <md-dialog-actions>&#39; +
           &#39;    <md-button ng-click="closeDialog()" class="md-primary">&#39; +
           &#39;      Close Dialog&#39; +
           &#39;    </md-button>&#39; +
           &#39;  </md-dialog-actions>&#39; +
           &#39;</md-dialog>&#39;,
         locals: {
           items: $scope.items
         },
         controller: DialogController
      });
      function DialogController($scope, $mdDialog, items) {
        $scope.items = items;
        $scope.closeDialog = function() {
          $mdDialog.hide();
        }
      }
    }
  }
})(angular);
</hljs>

<h3 id="pre-rendered-dialogs">Pre-Rendered Dialogs</h3>
<p>By using the <code>contentElement</code> option, it is possible to use an already existing element in the DOM.</p>
<hljs lang="js">
  $scope.showPrerenderedDialog = function() {
    $mdDialog.show({
      contentElement: &#39;#myStaticDialog&#39;,
      parent: angular.element(document.body)
    });
  };
</hljs>

<p>When using a string as value, <code>$mdDialog</code> will automatically query the DOM for the specified CSS selector.</p>
<hljs lang="html">
  <div style="visibility: hidden">
    <div class="md-dialog-container" id="myStaticDialog">
      <md-dialog>
        This is a pre-rendered dialog.
      </md-dialog>
    </div>
  </div>
</hljs>

<p><strong>Notice</strong>: It is important, to use the <code>.md-dialog-container</code> as the content element, otherwise the dialog
will not show up.</p>
<p>It also possible to use a DOM element for the <code>contentElement</code> option.</p>
<ul>
<li><code>contentElement: document.querySelector(&#39;#myStaticDialog&#39;)</code></li>
<li><code>contentElement: angular.element(TEMPLATE)</code></li>
</ul>
<p>When using a <code>template</code> as content element, it will be not compiled upon open.
This allows you to compile the element yourself and use it each time the dialog opens.</p>
<h3 id="custom-presets">Custom Presets</h3>
<p>Developers are also able to create their own preset, which can be easily used without repeating
their options each time.</p>
<hljs lang="js">
  $mdDialogProvider.addPreset(&#39;testPreset&#39;, {
    options: function() {
      return {
        template:
          &#39;<md-dialog>&#39; +
            &#39;This is a custom preset&#39; +
          &#39;</md-dialog>&#39;,
        controllerAs: &#39;dialog&#39;,
        bindToController: true,
        clickOutsideToClose: true,
        escapeToClose: true
      };
    }
  });
</hljs>

<p>After you created your preset at config phase, you can easily access it.</p>
<hljs lang="js">
  $mdDialog.show(
    $mdDialog.testPreset()
  );
</hljs>

<h3 id="javascript-promise-api-syntax-custom-dialog-template">JavaScript: promise API syntax, custom dialog template</h3>
<hljs lang="js">
(function(angular, undefined){
  &quot;use strict&quot;;

  angular
    .module(&#39;demoApp&#39;, [&#39;ngMaterial&#39;])
    .controller(&#39;EmployeeController&#39;, EmployeeEditor)
    .controller(&#39;GreetingController&#39;, GreetingController);

  // Fictitious Employee Editor to show how to use simple and complex dialogs.

  function EmployeeEditor($scope, $mdDialog) {
    var alert;

    $scope.showAlert = showAlert;
    $scope.closeAlert = closeAlert;
    $scope.showGreeting = showCustomGreeting;

    $scope.hasAlert = function() { return !!alert };
    $scope.userName = $scope.userName || &#39;Bobby&#39;;

    // Dialog #1 - Show simple alert dialog and cache
    // reference to dialog instance

    function showAlert() {
      alert = $mdDialog.alert()
        .title(&#39;Attention, &#39; + $scope.userName)
        .textContent(&#39;This is an example of how easy dialogs can be!&#39;)
        .ok(&#39;Close&#39;);

      $mdDialog
          .show( alert )
          .finally(function() {
            alert = undefined;
          });
    }

    // Close the specified dialog instance and resolve with &#39;finished&#39; flag
    // Normally this is not needed, just use &#39;$mdDialog.hide()&#39; to close
    // the most recent dialog popup.

    function closeAlert() {
      $mdDialog.hide( alert, &quot;finished&quot; );
      alert = undefined;
    }

    // Dialog #2 - Demonstrate more complex dialogs construction and popup.

    function showCustomGreeting($event) {
        $mdDialog.show({
          targetEvent: $event,
          template:
            &#39;<md-dialog>&#39; +

            &#39;  <md-dialog-content>Hello {{ employee }}!</md-dialog-content>&#39; +

            &#39;  <md-dialog-actions>&#39; +
            &#39;    <md-button ng-click="closeDialog()" class="md-primary">&#39; +
            &#39;      Close Greeting&#39; +
            &#39;    </md-button>&#39; +
            &#39;  </md-dialog-actions>&#39; +
            &#39;</md-dialog>&#39;,
          controller: &#39;GreetingController&#39;,
          onComplete: afterShowAnimation,
          locals: { employee: $scope.userName }
        });

        // When the &#39;enter&#39; animation finishes...

        function afterShowAnimation(scope, element, options) {
           // post-show code here: DOM element focus, etc.
        }
    }

    // Dialog #3 - Demonstrate use of ControllerAs and passing $scope to dialog
    //             Here we used ng-controller=&quot;GreetingController as vm&quot; and
    //             $scope.vm === <controller instance>

    function showCustomGreeting() {

       $mdDialog.show({
          clickOutsideToClose: true,

          scope: $scope,        // use parent scope in template
          preserveScope: true,  // do not forget this if use parent scope

          // Since GreetingController is instantiated with ControllerAs syntax
          // AND we are passing the parent &#39;$scope&#39; to the dialog, we MUST
          // use &#39;vm.<xxx>&#39; in the template markup

          template: &#39;<md-dialog>&#39; +
                    &#39;  <md-dialog-content>&#39; +
                    &#39;     Hi There {{vm.employee}}&#39; +
                    &#39;  </md-dialog-content>&#39; +
                    &#39;</md-dialog>&#39;,

          controller: function DialogController($scope, $mdDialog) {
            $scope.closeDialog = function() {
              $mdDialog.hide();
            }
          }
       });
    }

  }

  // Greeting controller used with the more complex &#39;showCustomGreeting()&#39; custom dialog

  function GreetingController($scope, $mdDialog, employee) {
    // Assigned from construction <code>locals</code> options...
    $scope.employee = employee;

    $scope.closeDialog = function() {
      // Easily hides most recent dialog shown...
      // no specific instance reference is needed.
      $mdDialog.hide();
    };
  }

})(angular);
</hljs>
  </section>


  

  
<section class="api-section">
  <h2>Methods</h2>
  <br/>
  <ul class="methods">
    <li id="alert">
      <h3 class="method-function-syntax">
        <code class="method-function-syntax">$mdDialog.alert();
</code>
      </h3>
      <div class="service-desc"><p>Builds a preconfigured dialog with the specified message.</p>
</div>

      <div class="method-param-table">

      

      

      
      <table class="md-api-table">
  <thead>
  <tr>
    <th>Returns</th>
    <th>Description</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>
<code class="api-type label type-hint type-hint-obj">obj</code></td>
    <td class="description"><p>an <code>$mdDialogPreset</code> with the chainable configuration methods:</p>
<ul>
<li>$mdDialogPreset#title(string) - Sets the alert title.</li>
<li>$mdDialogPreset#textContent(string) - Sets the alert message.</li>
<li>$mdDialogPreset#htmlContent(string) - Sets the alert message as HTML. Requires ngSanitize
  module to be loaded. HTML is not run through Angular&#39;s compiler.</li>
<li>$mdDialogPreset#ok(string) - Sets the alert &quot;Okay&quot; button text.</li>
<li>$mdDialogPreset#theme(string) - Sets the theme of the alert dialog.</li>
<li>$mdDialogPreset#targetEvent(DOMClickEvent=) - A click&#39;s event object. When passed in as an option,
  the location of the click will be used as the starting point for the opening animation
  of the the dialog.</li>
</ul>
</td>
  </tr>
  </tbody>
</table>
      

      </div>

    </li>
    
    <li id="confirm">
      <h3 class="method-function-syntax">
        <code class="method-function-syntax">$mdDialog.confirm();
</code>
      </h3>
      <div class="service-desc"><p>Builds a preconfigured dialog with the specified message. You can call show and the promise returned
will be resolved only if the user clicks the confirm action on the dialog.</p>
</div>

      <div class="method-param-table">

      

      

      
      <table class="md-api-table">
  <thead>
  <tr>
    <th>Returns</th>
    <th>Description</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>
<code class="api-type label type-hint type-hint-obj">obj</code></td>
    <td class="description"><p>an <code>$mdDialogPreset</code> with the chainable configuration methods:</p>
<p>Additionally, it supports the following methods:</p>
<ul>
<li>$mdDialogPreset#title(string) - Sets the confirm title.</li>
<li>$mdDialogPreset#textContent(string) - Sets the confirm message.</li>
<li>$mdDialogPreset#htmlContent(string) - Sets the confirm message as HTML. Requires ngSanitize
  module to be loaded. HTML is not run through Angular&#39;s compiler.</li>
<li>$mdDialogPreset#ok(string) - Sets the confirm &quot;Okay&quot; button text.</li>
<li>$mdDialogPreset#cancel(string) - Sets the confirm &quot;Cancel&quot; button text.</li>
<li>$mdDialogPreset#theme(string) - Sets the theme of the confirm dialog.</li>
<li>$mdDialogPreset#targetEvent(DOMClickEvent=) - A click&#39;s event object. When passed in as an option,
  the location of the click will be used as the starting point for the opening animation
  of the the dialog.</li>
</ul>
</td>
  </tr>
  </tbody>
</table>
      

      </div>

    </li>
    
    <li id="prompt">
      <h3 class="method-function-syntax">
        <code class="method-function-syntax">$mdDialog.prompt();
</code>
      </h3>
      <div class="service-desc"><p>Builds a preconfigured dialog with the specified message and input box. You can call show and the promise returned
will be resolved only if the user clicks the prompt action on the dialog, passing the input value as the first argument.</p>
</div>

      <div class="method-param-table">

      

      

      
      <table class="md-api-table">
  <thead>
  <tr>
    <th>Returns</th>
    <th>Description</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>
<code class="api-type label type-hint type-hint-obj">obj</code></td>
    <td class="description"><p>an <code>$mdDialogPreset</code> with the chainable configuration methods:</p>
<p>Additionally, it supports the following methods:</p>
<ul>
<li>$mdDialogPreset#title(string) - Sets the prompt title.</li>
<li>$mdDialogPreset#textContent(string) - Sets the prompt message.</li>
<li>$mdDialogPreset#htmlContent(string) - Sets the prompt message as HTML. Requires ngSanitize
  module to be loaded. HTML is not run through Angular&#39;s compiler.</li>
<li>$mdDialogPreset#placeholder(string) - Sets the placeholder text for the input.</li>
<li>$mdDialogPreset#initialValue(string) - Sets the initial value for the prompt input.</li>
<li>$mdDialogPreset#ok(string) - Sets the prompt &quot;Okay&quot; button text.</li>
<li>$mdDialogPreset#cancel(string) - Sets the prompt &quot;Cancel&quot; button text.</li>
<li>$mdDialogPreset#theme(string) - Sets the theme of the prompt dialog.</li>
<li>$mdDialogPreset#targetEvent(DOMClickEvent=) - A click&#39;s event object. When passed in as an option,
  the location of the click will be used as the starting point for the opening animation
  of the the dialog.</li>
</ul>
</td>
  </tr>
  </tbody>
</table>
      

      </div>

    </li>
    
    <li id="show">
      <h3 class="method-function-syntax">
        <code class="method-function-syntax">$mdDialog.show(optionsOrPreset);
</code>
      </h3>
      <div class="service-desc"><p>Show a dialog with the specified options.</p>
</div>

      <div class="method-param-table">

      
      
<table class="md-api-table">
  <thead>
    <tr>
      <th>Parameter</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
  
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          <b>* optionsOrPreset</b>
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-object">object</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-object">object</code></td>
        <td class="description">
          <p>Either provide an <code>$mdDialogPreset</code> returned from <code>alert()</code>, and
<code>confirm()</code>, or an options object with the following properties:</p>
<ul>
<li><code>templateUrl</code> - <code>{string=}</code>: The url of a template that will be used as the content
of the dialog.</li>
<li><code>template</code> - <code>{string=}</code>: HTML template to show in the dialog. This <strong>must</strong> be trusted HTML
 with respect to Angular&#39;s <a href="https://docs.angularjs.org/api/ng/service/$sce">$sce service</a>.
 This template should <strong>never</strong> be constructed with any kind of user input or user data.</li>
<li><code>contentElement</code> - <code>{string|Element}</code>: Instead of using a template, which will be compiled each time a
dialog opens, you can also use a DOM element.<br/><ul>
<li>When specifying an element, which is present on the DOM, <code>$mdDialog</code> will temporary fetch the element into
the dialog and restores it at the old DOM position upon close.</li>
<li>When specifying a string, the string be used as a CSS selector, to lookup for the element in the DOM.</li>
</ul>
</li>
<li><code>autoWrap</code> - <code>{boolean=}</code>: Whether or not to automatically wrap the template with a
<code>&lt;md-dialog&gt;</code> tag if one is not provided. Defaults to true. Can be disabled if you provide a
custom dialog directive.</li>
<li><code>targetEvent</code> - <code>{DOMClickEvent=}</code>: A click&#39;s event object. When passed in as an option,
the location of the click will be used as the starting point for the opening animation
of the the dialog.</li>
<li><code>openFrom</code> - <code>{string|Element|object}</code>: The query selector, DOM element or the Rect object
that is used to determine the bounds (top, left, height, width) from which the Dialog will
originate.</li>
<li><code>closeTo</code> - <code>{string|Element|object}</code>: The query selector, DOM element or the Rect object
that is used to determine the bounds (top, left, height, width) to which the Dialog will
target.</li>
<li><code>scope</code> - <code>{object=}</code>: the scope to link the template / controller to. If none is specified,
it will create a new isolate scope.
This scope will be destroyed when the dialog is removed unless <code>preserveScope</code> is set to true.</li>
<li><code>preserveScope</code> - <code>{boolean=}</code>: whether to preserve the scope when the element is removed. Default is false</li>
<li><code>disableParentScroll</code> - <code>{boolean=}</code>: Whether to disable scrolling while the dialog is open.
Default true.</li>
<li><code>hasBackdrop</code> - <code>{boolean=}</code>: Whether there should be an opaque backdrop behind the dialog.
Default true.</li>
<li><code>clickOutsideToClose</code> - <code>{boolean=}</code>: Whether the user can click outside the dialog to
close it. Default false.</li>
<li><code>escapeToClose</code> - <code>{boolean=}</code>: Whether the user can press escape to close the dialog.
Default true.</li>
<li><code>focusOnOpen</code> - <code>{boolean=}</code>: An option to override focus behavior on open. Only disable if
focusing some other way, as focus management is required for dialogs to be accessible.
Defaults to true.</li>
<li><code>controller</code> - <code>{function|string=}</code>: The controller to associate with the dialog. The controller
will be injected with the local <code>$mdDialog</code>, which passes along a scope for the dialog.</li>
<li><code>locals</code> - <code>{object=}</code>: An object containing key/value pairs. The keys will be used as names
of values to inject into the controller. For example, <code>locals: {three: 3}</code> would inject
<code>three</code> into the controller, with the value 3. If <code>bindToController</code> is true, they will be
copied to the controller instead.</li>
<li><code>bindToController</code> - <code>bool</code>: bind the locals to the controller, instead of passing them in.</li>
<li><code>resolve</code> - <code>{object=}</code>: Similar to locals, except it takes promises as values, and the
dialog will not open until all of the promises resolve.</li>
<li><code>controllerAs</code> - <code>{string=}</code>: An alias to assign the controller to on the scope.</li>
<li><code>parent</code> - <code>{element=}</code>: The element to append the dialog to. Defaults to appending
to the root element of the application.</li>
<li><code>onShowing</code> - <code>function(scope, element)</code>: Callback function used to announce the show() action is
starting.</li>
<li><code>onComplete</code> - <code>function(scope, element)</code>: Callback function used to announce when the show() action is
finished.</li>
<li><code>onRemoving</code> - <code>function(element, removePromise)</code>: Callback function used to announce the
 close/hide() action is starting. This allows developers to run custom animations
 in parallel the close animations.</li>
<li><code>fullscreen</code> <code>{boolean=}</code>: An option to toggle whether the dialog should show in fullscreen
 or not. Defaults to <code>false</code>.</li>
</ul>

          
        </td>
      </tr>
    
  
  
    
  

  </tbody>
</table>

      

      

      
      <table class="md-api-table">
  <thead>
  <tr>
    <th>Returns</th>
    <th>Description</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>
<code class="api-type label type-hint type-hint-promise">promise</code></td>
    <td class="description"><p>A promise that can be resolved with <code>$mdDialog.hide()</code> or
rejected with <code>$mdDialog.cancel()</code>.</p>
</td>
  </tr>
  </tbody>
</table>
      

      </div>

    </li>
    
    <li id="hide">
      <h3 class="method-function-syntax">
        <code class="method-function-syntax">$mdDialog.hide([response]);
</code>
      </h3>
      <div class="service-desc"><p>Hide an existing dialog and resolve the promise returned from <code>$mdDialog.show()</code>.</p>
</div>

      <div class="method-param-table">

      
      
<table class="md-api-table">
  <thead>
    <tr>
      <th>Parameter</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
  
  
    
  
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          response
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-object">*</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-object">*</code></td>
        <td class="description">
          <p>An argument for the resolved promise.</p>

          
        </td>
      </tr>
    
  

  </tbody>
</table>

      

      

      
      <table class="md-api-table">
  <thead>
  <tr>
    <th>Returns</th>
    <th>Description</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>
<code class="api-type label type-hint type-hint-promise">promise</code></td>
    <td class="description"><p>A promise that is resolved when the dialog has been closed.</p>
</td>
  </tr>
  </tbody>
</table>
      

      </div>

    </li>
    
    <li id="cancel">
      <h3 class="method-function-syntax">
        <code class="method-function-syntax">$mdDialog.cancel([response]);
</code>
      </h3>
      <div class="service-desc"><p>Hide an existing dialog and reject the promise returned from <code>$mdDialog.show()</code>.</p>
</div>

      <div class="method-param-table">

      
      
<table class="md-api-table">
  <thead>
    <tr>
      <th>Parameter</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
  
  
    
  
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          response
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-object">*</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-object">*</code></td>
        <td class="description">
          <p>An argument for the rejected promise.</p>

          
        </td>
      </tr>
    
  

  </tbody>
</table>

      

      

      
      <table class="md-api-table">
  <thead>
  <tr>
    <th>Returns</th>
    <th>Description</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>
<code class="api-type label type-hint type-hint-promise">promise</code></td>
    <td class="description"><p>A promise that is resolved when the dialog has been closed.</p>
</td>
  </tr>
  </tbody>
</table>
      

      </div>

    </li>
    </ul>
</section>
  
  



  
</div>


</div>
